<template>
    <el-dialog v-model="dialogVisible" title="返现设置" :close-on-click-modal="false" width="750px">
        <div class="dialog-container">
            <div class="head-box mg-b-25">
                <div class="header fs-16 bold">客户信息</div>
                <div class="flex flex-wrap mg-t-20">
                    <div class="flex-1 flex">
                        <div class="name fc-lightgray">推荐人</div>
                        <div class="value">{{ info.userName }}</div>
                    </div>
                    <div class="flex-1 flex">
                        <div class="name fc-lightgray">手机号</div>
                        <div class="value">{{ info.phone }}</div>
                    </div>
                </div>
                <div class="flex mg-t-16">
                    <div class="name fc-lightgray">企业名称</div>
                    <div class="value">{{ info.companyName }}</div>
                </div>
                <div class="flex flex-wrap mg-t-16">
                    <div class="flex-1 flex">
                        <div class="name fc-lightgray">已推荐</div>
                        <div class="value">{{ info.promotionCount }}</div>
                    </div>
                    <div class="flex-1 flex">
                        <div class="name fc-lightgray">当前已成交</div>
                        <div class="value">{{ info.dealCount }}</div>
                    </div>
                </div>
                <div class="flex mg-t-16">
                    <div class="name fc-lightgray">当前线索</div>
                    <div class="value">{{ info.customName }} | {{ info.contactName }} | {{ info.contactPhone }}</div>
                </div>
            </div>
            <el-form ref="formRef" :inline="true" :model="formData" label-position="top" :rules="rules" class="">
                <el-form-item v-for="(i, index) in formData" :key="index" :label="i.label" :prop="`${i.prop}.value`">
                    <el-input v-if="i.type === 'input'" class="w-300" v-model="i.value" :type="i.inputType || 'text'"
                        :placeholder="i.placeholder" />
                    <el-radio-group v-if="i.type === 'radio'" class="w-300" v-model="i.value">
                        <template v-for="(item, idx) in i.options" :key="idx">
                            <el-radio :label="item.value">{{ item.label }}</el-radio>
                        </template>
                    </el-radio-group>
                    <el-select v-if="i.type === 'select'" v-model="i.value" class="w-300"
                        :placeholder="i.placeholder || '请选择'" :filterable="i.filterable " @focus="i.handleFocus && i.handleFocus(i)"
                        @change="i.handleChange && i.handleChange(i)">
                        <el-option v-for="item in i.options" :key="item[i?.defaultAttrs?.value || 'value']"
                            :label="item[i?.defaultAttrs?.label || 'label']"
                            :value="item[i?.defaultAttrs?.value || 'value']" />
                    </el-select>
                    <el-checkbox-group v-if="i.type === 'checkgroup'" v-model="i.value"
                        @change="i.handleChange && i.handleChange(i)">
                        <el-checkbox v-for="(i, index) in i.options" :key="index" :label="i.value">{{
                            i.label
                        }}</el-checkbox>
                    </el-checkbox-group>

                    <el-radio-group v-if="i.type === 'radiogroup'" v-model="i.value">
                        <el-radio  v-for="(i, index) in i.options" :key="index" :label="i.value">{{ i.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import { promiotionDetail, promotionInfo } from '@/api/activity/index.ts'
import { getmarketapi } from '@/api/api'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    id: {
        type: [Number, String],
        default: 0
    }
})

const emits = defineEmits(['update:show', 'success'])

const dialogVisible = ref(false)

const info = ref({})

watch(() => props.show, (newval) => {
    dialogVisible.value = newval
    if (newval) {
        setTimeout(() => {
            getData()
            getSalesList()
        }, 0)
    }
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
    if (!newval) {
        formRef.value.resetFields()
    }
})

const formData = ref({
    rebateMoney: {
        label: '返现金额',
        prop: 'rebateMoney',
        type: 'select',
        placeholder: '请选择',
        value: '',
        options: [
            {
                label: 388,
                value: 388
            },
            {
                label: 1000,
                value: 1000
            },
        ],
        defaultAttrs: {
            label: 'label',
            value: 'value'
        }
    },
    salesId: {
        label: '所属销售',
        prop: 'salesId',
        type: 'select',
        placeholder: '请选择',
        value: '',
        filterable: true,
        options: [],
        defaultAttrs: {
            label: 'salesName',
            value: 'salesId'
        },
        handleFocus: () => {
        }
    },
    isPay: {
        label: '结算状态',
        prop: 'isPay',
        type: 'radiogroup',
        options: [
            {
                label: '未结算',
                value: 0
            },
            {
                label: '已结算',
                value: 1
            },
            {
                label: '不发放',
                value: 2
            },
        ],
        value: 1
    },
})

const rules = ref({
    'rebateMoney.value': [
        {
            required: true,
            trigger: 'change',
            message: '返现金额不能为空'
        }
    ],
    'salesId.value': [
        {
            required: true,
            trigger: 'change',
            message: '所属销售不能为空'
        }
    ],
    'isPay.value': [
        {
            required: true,
            trigger: 'change',
            message: '结算状态不能为空'
        }
    ],
})

const formRef = ref(null)

const submit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            // handleAddChannel()
            handleConfirm()
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const getData = () => {
    promiotionDetail({
        id: props.id
    }).then(res => {
        info.value = res
        formData.value.rebateMoney.value = res.rebateMoney
        formData.value.salesId.value = res.salesId
        formData.value.salesId.options = [
            {
                salesId: res.salesId,
                salesName: res.salesName
            }
        ]
        formData.value.isPay.value = res.isPay || ''
    })
}

const getSalesList = () => {
    // if (formData.value.salesId.options?.length) return
    getmarketapi().then(res => {
        formData.value.salesId.options = res || []
        formData.value.salesId.options.forEach(i => {
            i.salesId = i.saleId
            i.salesName = i.saleName
        })
        console.log(2222, formData.value.salesId.options)
    })
}

const handleConfirm = () => {
    const data = {
        id: props.id,
        salesId: formData.value.salesId.value,
        rebateMoney: formData.value.rebateMoney.value,
        isPay: formData.value.isPay.value
    }
    promotionInfo(data).then(res => {
        ElMessage({
            message: '保存成功',
            type: 'success',
        })
        emits('success')
        dialogVisible.value = false
    })
}


// watch(() => props.id, (newval) => {
//     if (newval) {
//         getData()
//         getSalesList()
//     }
// }, {
//     immediate: true
// })

</script>
<style lang="scss" scoped>
.dialog-container {
    color: #333;
    margin-top: -20px;
}

.bg-gray {
    background: #fafafc;
}

.table-item {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $borderColor;
    cursor: move;
}

.table-head {
    height: 40px;
    line-height: 40px;
}

.header {
    &::before {
        display: inline-block;
        content: '';
        width: 4px;
        height: 14px;
        background: #0256FF;
        margin-right: 8px;
    }
}

.fc-lightgray {
    color: #9497B1;
}

.name {
    width: 100px;
    padding-left: 10px;
}

.w-300 {
    width: 300px;
}
</style>